<template>
	<view>
		<view class="seach-box">
			<uni-icons type="search" size="20" color="#808080" @click="toSeachResult"></uni-icons>
			<uni-icons type="clear" size="14" color="#808080" v-show="seachContext" @click="seachContext = ''"></uni-icons>
			<input type="text" v-model="seachContext" :focus="isFocus" confirm-type="search" @confirm="toSeachResult" placeholder="你可以在这里搜索任何东西" />
		</view>
		<view class="history-seach" v-if="historySearches.length > 0">
			<text>历史记录</text>
			<view class="list">
				<view class="item" v-for="(item, index) in historySearches" :id="index" @click="historyClick(item)">
					<text>{{item}}</text>
				</view>
			</view>
			<view class="trash" v-if="historySearches.length > 0" @click="trashHistory">
				<uni-icons type="trash" color="#b4b4b4" size="16"></uni-icons>
				<text>清空搜索记录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				isFocus: false,
				seachContext: '',
				historySearches: [],
				hasMore: false
			}
		},
		methods: {
			init() {
				var that = this
				that.getHistorySearches()
			},
			// 获取缓存中的历史记录
			getHistorySearches() {
				var that = this
				uni.getStorage({
					key: 'historySearches',
					success: (res) => {
						that.historySearches = res.data
					}
				})
			},
			trashHistory(){
				var that = this
				uni.setStorage({
					key: 'historySearches',
					data: [],
					success: () => {
						that.getHistorySearches()
					}
				})
			},
			historyClick(item){
				this.seachContext = item
				this.toSeachResult()
			},
			pageChange(){
				var that = this
				uni.hideKeyboard()
				uni.navigateTo({
					url: '../seach-result/seach-result?context=' + that.seachContext
				})
			},
			toSeachResult() {
				var that = this
				var flag = true
				for (var i = 0; i < that.historySearches.length; i++) {
					if (that.historySearches[i] === that.seachContext) {
						flag = false
					}
				}
				if(this.seachContext === ' ' || this.seachContext === '')
					flag = false
				if (flag) {
					that.historySearches = [that.seachContext, ...that.historySearches]
					uni.setStorage({
						key: 'historySearches',
						data: that.historySearches,
						success: () => {
							that.getHistorySearches()
						}
					})
				}
				that.pageChange()
			}
		},
		onLoad(opt) {
			if(opt.status === 'focus') {
				this.status = true
				this.seachContext = opt.context
			}
			this.init()
		},
		onHide(){
			uni.hideKeyboard()
		},
		onShow() {
			this.isFocus = true
		}
	}
</script>

<style lang="scss">
	.seach-box {
		padding: 20rpx 0;
		display: flex;
		margin: 30rpx;
		flex-direction: row-reverse;
		justify-content: space-between;
		border-bottom: 3rpx solid #dfdfdf;
		align-items: center;
		text {
			margin-left: 30rpx;
		}
		input {
			color: $uni-text-color;
			width: 600rpx;
			font-weight: 600;
			font-size: $uni-font-size-lg;
		}
	}

	.history-seach {
		padding: 20rpx 30rpx;

		text {
			color: #555555;
			font-size: $uni-font-size-base;
		}

		.list {
			overflow: hidden;
			display: flex;
			margin: 40rpx 0;
			flex-direction: row;
			flex-wrap: wrap;
			.item {
				border-radius: 10rpx;
				background-color: #f2f2f2;
				text-align: center;
				padding: 12rpx 30rpx;
				margin-right: 10rpx;
				margin-bottom: 20rpx;
				text{
					color: #363736;
				}
			}
			max-height: 150rpx;
		}

		.trash {

			text-align: center;

			text {
				color: #b4b4b4;
			}
		}
	}
</style>
